<template>
	<view class="vh-100">
		<!-- <view style="position:fixed;width: 100%;padding-bottom：30rpx;z-index:10" class="bg-white">
			<div style="height:30rpx;background-color: #fff;"></div>
			<view :style="{height: statusBarHeight + 'px'}" class="bg-white"></view>
			<Title :title="title" class="bg-white" />
		</view> -->
		<!-- <view style="height:130rpx"></view> -->
		<CommonHeader :title="$t('发布')" ></CommonHeader>
		<u-form
			:model="model1"
			ref="uForm"
			class="ml-20 mr-20 formSty"
		>
			<view class="contentBg mt-15">
				<u-form-item
					:border-bottom="false"
					:label="$t('服务种类')"
					label-position="top"
					class="titleSty"
				>
				<u-input v-model="typeName" :disabled="true" disabledColor="#F7F7F7" type="input" :placeholder="$t('请输入服务种类')" :maxlength="100" :border="true" height="90" />
				<!-- <u-button class="badBtn" @click="showType = true">
					<span class="text-333" style="flex: 1;">{{ typeName }}</span>
					<image class="w-20 h-15" src="../../../../static/icon/downArrow.png" mode=""  style="text-align: right;"></image>
				</u-button>
				<u-picker v-model="showType" mode="selector" :range="typeList" range-key="name" @cancel= "showType = false" @confirm="getTypeInfo"></u-picker> -->
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				
				<u-form-item
					:border-bottom="false"
					prop="r_content"
					:required="true"
					:label="$t('订单内容')"
					label-position="top"
					class="titleSty"
					style="position: relative;"
				>
					<u-input v-model="model1.r_content" type="textarea" :placeholder="$t('请输入订单内容')" :maxlength="1000" :border="true" height="240" :auto-height="true" />
						<p class="text-888 fz24" style="position: absolute; bottom: 30rpx; right: 20rpx;"> {{ remaining }} </p>
				</u-form-item>
				<u-form-item
					:border-bottom="false"
					prop="amount"
					:required="true"
					:label="$t('服务积分')"
					label-position="top"
					class="titleSty"
				>
					<u-input v-model="model1.amount" type="text" :placeholder="$t('请输入服务积分')" :maxlength="200" :border="true" :auto-height="true" />
					
				</u-form-item>
			</view>
		</u-form>
		
		<view class="empty"></view>
		<view class="footer_btn4">
			<button class="btn_blue" :disabled="btnDis" @click="submit">{{  $t('确认')}}</button>
		</view>
	</view>
</template>

<script>
	// import Title from '../components/title.vue'
	import { createOrder } from '@/api/basic'
	import CommonHeader from "@/pages/components/common-header.vue";
	import {
		HTTP_REQUEST_URL,
		IMAGE_MAX_SIZE,
		IMAGE_MAX_COUNT,
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			// Title
			CommonHeader
		},
		data() {
			return {
				// title: this.$t('发布'),
				showKind: false,
				btnDis: false,
				current: '',
				currentUnit: 0,
				showSend: false,
				showType: false,
				videoItem: {},
				typeList: [
					{
						name: this.$t('专业代办'),
						id: 0
					},
					{
						name: this.$t('生活广告'),
						id: 1
					},
					{
						name: this.$t('曝光台'),
						id: 2
					},
				],
				fileList2: [],
				fileList1: [],
				fullBeginAddress: '',
				fullBeginAddressKey: '',
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				action: HTTP_REQUEST_URL + '/common/upload',
				imageMaxSize: IMAGE_MAX_SIZE,
				imageMaxCount: IMAGE_MAX_COUNT,
				max_count: 3,
				autoUpload: true,
				showUploadList: true,
				typeName: '',
				infoBasic: {},
				model1: {
					user_id: uni.getStorageSync("user_id"), // 用户id
					amount: '',
					r_content: '',
					on: ''
				},
				rules: {
					amount: [
						{ 
							required: true, 
							message: this.$t('请输入服务积分'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return /^\d{1,7}$/.test(value);
							},
							message: this.$t('只能输入数字且不能超过七位'),
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					r_content: [
						{ 
							required: true, 
							message: this.$t('请填写订单内容'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
				},
				maxLength: 1000,
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			this.infoBasic = uni.getStorageSync('createOrder')
			// this.infoBasic = JSON.parse(options.itemInfo)
			console.log('this.infoBasic', this.infoBasic)
			this.typeName =this.langR == 'zh'? this.infoBasic.service:this.infoBasic.service_ru
			window.onNativeHide  =()=>{
				uni.removeStorageSync("createOrder")
			}
		  },
		mounted() {
			// this.getCateLife()
		},
		computed: {
			  remaining() {
				return this.maxLength - this.model1.r_content.length;
			  }
		},
		methods: {
			back() { 
					// uni.navigateBack()
					this.cback()
				},
				getTypeInfo(e) {
					this.typeName = this.typeList[e].name
					this.model1.category_id = this.typeList[e].id
				},
				
				  submit() {
					  const identity_name = uni.getStorageSync('userInfoFull').identity_name || ''
					  console.log('identity_name--', identity_name)
						const formData=JSON.parse(JSON.stringify(this.model1))
						formData.on = this.infoBasic.on
						formData.identity_name = identity_name
						console.log('formData-----', formData)
					 this.$refs.uForm.validate(valid => {
						if (valid) {
							this.btnDis = true
							uni.showLoading({
								title: this.$t('提交中')
							});
							createOrder({...formData}).then(res => {
								if (res.data.code == 200) {
									// uni.redirectTo：替换当前页，打开新页面，相当于当前页就关闭了
									// uni.navigateTo 追加页面，相当于打开新页面，旧页面还全都在
									// uni.$u.toast(res.data.message)
									uni.$u.toast(res.data[this.plang('message')])
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/tabbar/newUser/serviceOrder/index?order=0&statusJob=1'
										})
									}, 300);
								
								} else {
									// uni.$u.toast(res.data.message)
									uni.$u.toast(res.data[this.plang('message')])
								}
								uni.hideLoading()
							})
						} else {
							uni.$u.toast(this.$t('请检查是否有未上传内容'))
						}
					})
				  }
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	@import './index.scss';
	page {
		background: #F6F7FB;
	}
	.empty {
		width: 100%;
		height: 30rpx;
	}
	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
	}
	.uploads {
		// width: 78rpx;
		// height: 78rpx;
	}
	
	.badBtn {
		width: 100%;
		height: 80rpx;
		border-radius: 18rpx;
		// background: #F7F7F7;
			// border: 1rpx solid #dcdfe6;
		display: flex;
		justify-content: space-between;
	}
		/deep/ .u-hairline-border::after {
			border: 2rpx solid #D8D8D8 !important;
		}
		.formSty {
			padding-bottom: 200rpx;
			/deep/ .u-form-item__body {
				padding: 0;
			}
		}
		.smallInputSty {
			width: 85%;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			border: 2rpx solid #D8D8D8;
			// background: #F7F7F7;
			color: #333;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx;
		
			/* 116.667% */
			/deep/ .uni-input-input,
			.uni-input-placeholder {
				text-align: center;
			}
		}
		.unitSty {
				width: 150rpx;
				height: 80rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				border: 2rpx solid #D8D8D8;
				line-height: 80rpx;
				text-align: center;
				.commonSty {
					color: #333;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
				}
				.acticeUnitSty {
					color: #278AFF;
				}
		}
	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;
		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}
		/deep/ .u-icon__icon {
			font-size: 52rpx !important;
		}
		/deep/ .u-border-bottom{
			// border-bottom: none;
			// display: none;
			position: inherit;
		}
		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}
		/deep/ .u-add-tips {
			display: none !important;
		}
		/deep/ .u-input--border {
			border-radius: 18rpx !important;
		}
		/deep/ .u-form-item {
			line-height: 50rpx !important;
			color: #0e0e0e !important;
		}
	}
	.textareaSty {
		width: 100%;
		height: 226rpx !important;
		border-radius: 18rpx;
		border: 2rpx solid #D8D8D8;
		// background: #F7F7F7;
		margin-top: 24rpx;
	}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		z-index: 20;
		.btn_blue{
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.commonKindSty {
		width: 150rpx;
		height: 64rpx;
		background-color: #F7F7F7;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 64rpx;
		letter-spacing: 0px;
		color: #1D1D1D;
		text-align: center;
		border-radius: 500rpx;
	}
	.activeKindSty {
		background-color: #D7E9FF;
		border: 1px solid #278AFF;
		color: #278AFF;
	}
	/deep/	.header-www{background-color: #fff !important;}
</style>
